<template>
  <div class="main">
    <header-view :active-index="selectIndex"/>
    <div class="banner">
      <slot name="banner"></slot>
    </div>
    <div class="content">
      <slot></slot>
    </div>
    <el-backtop :visibility-height="300" :bottom="70">
      <el-tooltip effect="dark" content="回到顶部" placement="left">
        <i class="el-icon-caret-top"></i>
      </el-tooltip>
    </el-backtop>
    <footer-view/>
  </div>
</template>

<script>
import HeaderView from '@/views/front/components/HeaderView.vue'
import FooterView from '@/views/front/components/FooterView.vue'
export default {
  name: 'LayoutView',
  components: { HeaderView, FooterView },
  props: ['selectIndex'],
  data () {
    return {}
  }
}
</script>

<style scoped lang="scss">
.main{
  min-height: 100vh;
  .content{
    width: 1080px;
    overflow: hidden;
    margin: 0 auto;
    min-height: calc(100vh - 121px);
  }
}
</style>
